*{
    padding: 0;
    margin:0;
    list-style-type:none;
    text-decoration:none;


}
body,html{
    width:100%;
    height:100%;
    /* background:rgb(255, 237, 197); */
    background:url(../img/music01.jpg) repeat;
    background-size:100%;
}
/* 蒙版大盒子开始 */
#big_mask{
    position:relative;
    width:100%;
    height:100%;
    /* background:rgba(138, 104, 10, 0.8); */
}

/* logo盒子开始 */
.logo_box{
    width:250px;
    height:50px;
    /* border:1px solid red; */
    position: absolute;
    top:10px;
    left:10px;
}
.logo_box .logo_ico{
    display:block;
    width:50px;
    height:50px;
    float:left;
    margin-right:10px;
    background:url(../img/logo.png) no-repeat;
    background-size:100% 100%;

}
.logo_box p{
    float:left;
    height:50px;
    width:180px;
    line-height:50px;
    color:white;
    font-size:16px;
}
/* logo盒子结束 */
/* 音乐主体盒子开始 */
.music_box{
    width:700px;
    height:500px;
    margin:0 auto;
    /* background:red; */
    position:relative;
    top:50px;
    background:rgba(255, 255, 255, 0.85);
    border-radius: 8px;
    box-shadow:rgb(77, 50, 10) 0px 1px 6px;
}
/* 导航栏开始 */
nav{
    width:700px;
    height:50px;
    background:rgb(155, 93, 0);
    border-radius: 8px 8px 0 0;
}

nav h4{
    width:100px;
    height:50px;
    float:left;
    /* border:1px solid white; */
    text-align:center;
    line-height:50px;
    font-weight:400px;
    font-family: "宋体";
    color:white;
    font-size:20px;
}

nav .search_box{
    width:260px;
    height:26px;
    float:right;
    margin-top:12px;
    margin-right:20px;
    padding:0 5px;
    border-radius: 25px;
    background:rgba(255,255,255,0.7);
    border:1px solid white;

}

nav .search_box #search_input{
    width:230px;
    height:24px;
    background:transparent;
    border:none;
    font-size:12px;
    color:#929292;
    border-radius: 20px;
}
nav .search_box i{
   display:block;
   float:right;
    width:22px;
    height:22px;
    /* border:1px solid red; */
    overflow: hidden;
    margin-top:3px;
    background:url(../img/music02.png) no-repeat;
    background-size:100% 100%;
    cursor:pointer;

}


/* 导航栏结束 */
/* 侧边列表区域开始 */
.scroll_box{
    margin-top:10px;
    width:185px;
    /* border:1px solid red; */
    overflow:hidden;
    float:left;
    border-right:1px solid rgb(201, 199, 199);

}
.list_box{
    
    padding:0 5px;
    width:195px;
    height:400px;
   
    
     overflow-y:scroll;
}
.list_box li{
    width:165px;
    height:30px;
    padding-left: 5px;
    
    /* background:red; */
}
.list_box li i{
    display:block;
    float:left;
    width:15px;
    height:15px;
    margin-top:7px;
    /* border:1px solid white; */
    background:url(../img/music04.png) no-repeat;
    background-size:100% 100%;
    cursor:pointer;
    

}
.list_box li i:hover{
     outline:2px solid rgb(197, 135, 0);

}
.list_box li p {
    
    float: left;
    padding-left:10px;
    width: 110px;
    height:15px;
    margin-top: 8px;
    font-size:12px;
    color:#999;
    font-size:10px;
    overflow:hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
    line-height:15px;
    
    /* border:1px solid red; */
   

}
.list_box li span {
    display: block;
    float: left;
    width: 15px;
    height: 15px;
    margin-top: 8px;
    /* border:1px solid white; */
    background: url(../img/music03.png) no-repeat;
    background-size: 100% 100%;
    cursor:pointer;


}
.list_box li span:hover{
    outline:2px solid rgb(250, 212, 0);
}
/* 侧边列表区域结束 */
/* 音乐动画区域开始 */
.animation_box{
    position: relative;
    width:330px;
    height:400px;
    margin-top:10px;
    float:left;
    /* background:rgba(255,255,255,0.9); */
    /* border-left:1px solid #999; */
    border-right:1px solid #999;
}
.animation_box .music_bar{
    width:120px;
    height:70px;
    position:absolute;
    right:80px;
    background:url(../img/music_bar.png) no-repeat;
    background-size: 100% 100%;
    transition:all 1s ease-in;
    transform-origin: 8% 8%;
    z-index:9;
    

}
.animation_box .music_bar_dong{
    /* transform:none; */
    transform:rotate(30deg);
}
.animation_box .diepian_box{
    width:260px;
    height:260px;
    /* background:blue; */
    margin:70px 35px;
    border-radius: 50%;
     background:url(../img/music_poster.png) no-repeat;
     background-size: 100% 100%;
    
}
.animation_box .diepian_box_dong {
    animation: run 10s linear infinite;

}

@keyframes run{
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
.animation_box .diepian_box .img_box{
    width:140px;
    height:140px;
    background:url(../img/01.jpeg) no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    position:absolute;
    left:50%;
    top:50%;
     border-radius: 50%;
    transform: translate(-53%,-53%);
}
.animation_box .diepian_box .img_box img{
    width:100%;
    height:100%;
    border-radius: 50%;
}
/* 音乐动画区域结束 */
/* 当前播放标题开始 */
.playing_title{
    position:absolute;
    bottom:60px;
    left:280px;
    width:200px;
    height:30px;
    font-size:12px;
    color:#999;
    line-height:30px;
    /* text-align:center; */
    /* border:1px solid red; */
}
.playing_title span{
    display:block;
    float:right;
overflow:hidden;
white-space: nowrap;
text-overflow:ellipsis;
    width:138px;
    height:30px;
    font-size:10px;
    color:#666;
    line-height:30px;
    /* text-align:center; */
    /* border:1px solid blue;; */

}
/* 当前播放标题结束 */
 /* 评论区开始 */
 .coment_bigbox{
     margin-top:10px;
     width:180px;
     height:400px;
     float:left;
     overflow: hidden;
     /* border:1px solid red; */



 }
.coment_box{
    width:200px;
    height:400px;
    
    /* background:blue; */
    float:left;
    overflow-y:scroll;
}
.coment_box h5{
    width:180px;
    height:20px;
    font-size:14px;
    color:#333;
    line-height: 20px;;
    
}
.coment_box dl{
    width:180px;
    height:380px;
    /* background: red; */

}
.coment_box dl dd{
    position:relative;
    width:170px;
    padding:0 5px;
    height:120px;
    /* background: blue; */
    margin:5px 0;

}
.coment_box dl dd i{
    display:block;
    float:left;
    width:25px;
    height:25px;
    background:red;
    border-radius: 50%;

}

.coment_box dl dd i img{
    width:100%;
    height:100%;
    border-radius: 50%;
}
.coment_box dl dd b{
    display:block;
    margin-left:5px;
    float:left;
    width:140px;
    overflow:hidden;
    height:20px;
    font-size:12px;
    color:#333;
    line-height:20px;
    /* background:white; */

}
.coment_box dl dd .coment_con {
    position:absolute;
    top:20px;
    width:160px;
    
    font-size:9px;
    margin-top:10px;
    height:85px;
    overflow: hidden;
    /* white-space: wrap; */
    font-family: "宋体";

    color:#666;
    /* text-overflow: ellipsis; */
    /* border:1px solid white; */
}
  /* 评论区结束 */
/* 底部状态条开始 */
div.status_box{
    position:absolute;
    bottom:0;
    width:700px;
    height:35px;
    background:rgb(247, 192, 12);
}

div.status_box audio{
    height:35px;
    width:700px;
}
/* 底部状态条结束 */





/* 音乐主体盒子结束 */

/* 蒙版大盒子结束 */


